<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="有了这个，就不用到处去找重复的了">
  <meta name="keyword" content="hexo, vuejs">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      stylus预处理入门(一)——选择器 | 杂记
    
  </title>
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/plugins/gitment.css">
<link rel="stylesheet" href="/css/plugins/search.css">
  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  <script src="/js/qrious.js"></script>
<script src="/js/gitment.js"></script>
<script src="/js/search.js"></script>
</head>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>杂记</span>
    </a>
    <ul class="right-list">
        <li class="list-item">   
          <span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;">
            <input type="text" id="local-search-input" class="search-query st-default-search-input aa-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
          </span>
        </li>
      
        <li class="list-item">
          
            <a href="/" class="item-link">Home</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">Tags</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">Archives</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">Projects</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">About</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div id="menu-mask" class="menu-mask">
      <ul class="menu-list">
        <li class="menu-item">   
          <span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;">
            <input type="text" id="mobile-search-input" class="search-query st-default-search-input aa-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
          </span>
        </li>
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">Home</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">Tags</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">Archives</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">Projects</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">About</a>
            
          </li>
        
      </ul>
    </div>
  </div>
<div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="输入关键词" />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '博文',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '未定义',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

<div id="result-wrap" class="ins-search">
    <div id="local-search-result"></div>
</div>

<script type="text/javascript">      
     var search_path = "search.xml";
     if (search_path.length == 0) {
      search_path = "search.xml";
     }
     var path = "/" + search_path;
     searchFunc(path, 'local-search-input', 'local-search-result');
     searchFunc(path, 'mobile-search-input', 'local-search-result');
</script>
</header>

    <div id="article-banner">
  <h2>stylus预处理入门(一)——选择器</h2>
  <p class="post-date">2017-08-30</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>

    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#相关网站"><span class="post-toc-number">1.</span> <span class="post-toc-text">相关网站</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#CSS预处理器语言的个人理解"><span class="post-toc-number">2.</span> <span class="post-toc-text">CSS预处理器语言的个人理解</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#stylus的特点"><span class="post-toc-number">3.</span> <span class="post-toc-text">stylus的特点</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#stylus的优点"><span class="post-toc-number">4.</span> <span class="post-toc-text">stylus的优点</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#stylus的缺点"><span class="post-toc-number">5.</span> <span class="post-toc-text">stylus的缺点</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#stylus语法介绍"><span class="post-toc-number">6.</span> <span class="post-toc-text">stylus语法介绍</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#选择器-selectors"><span class="post-toc-number">6.1.</span> <span class="post-toc-text">选择器(selectors)</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#缩进-换行缩进表示语句前进"><span class="post-toc-number">6.1.1.</span> <span class="post-toc-text">缩进(换行缩进表示语句前进)</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#同级选择器"><span class="post-toc-number">6.1.2.</span> <span class="post-toc-text">同级选择器</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#引用父级选择器"><span class="post-toc-number">6.1.3.</span> <span class="post-toc-text">引用父级选择器</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#部分引用父级选择器之单层选择器"><span class="post-toc-number">6.1.4.</span> <span class="post-toc-text">部分引用父级选择器之单层选择器</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#部分引用父级选择器之范围选择器"><span class="post-toc-number">6.1.5.</span> <span class="post-toc-text">部分引用父级选择器之范围选择器</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#其他部分引用父级选择器"><span class="post-toc-number">6.1.6.</span> <span class="post-toc-text">其他部分引用父级选择器</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#选择器的值"><span class="post-toc-number">6.1.7.</span> <span class="post-toc-text">选择器的值</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>
    
<main class="app-body">
  <article class="post-article">
    <section class="markdown-content" id="post-content"><h2 id="相关网站"><a href="#相关网站" class="headerlink" title="相关网站"></a>相关网站</h2><ul>
<li>官网：<a href="http://stylus-lang.com/" target="_blank" rel="external">stylus</a></li>
<li>中文文档：<a href="http://www.zhangxinxu.com/jq/stylus/" target="_blank" rel="external">stylus中文版参考文档</a> by 张鑫旭</li>
<li>理解css预处理器：<a href="http://leeluolee.github.io/2013/08/01/mcss-start/" target="_blank" rel="external">css预处理器初识</a> by 栓萝卜的棍子</li>
<li>三种css预处理器语言详解：<a href="http://www.oschina.net/question/12_44255" target="_blank" rel="external">less|sass|stylus</a> by 开源中国</li>
</ul>
<hr>
<h2 id="CSS预处理器语言的个人理解"><a href="#CSS预处理器语言的个人理解" class="headerlink" title="CSS预处理器语言的个人理解"></a>CSS预处理器语言的个人理解</h2><ul>
<li>用另外一种可读性高、语法性强的语言来写CSS。stylus可以使用循环、分支、定义变量和函数结构来写css，这样写起来既方便又快捷。</li>
<li>通过一种转换机制将这种语法转化为原生css。每种语言的转化机制也有很多种，可以使用各种语言官网的方法转化，例如<a href="http://lesscss.org/#using-less" target="_blank" rel="external">less</a>。也可以使用构建工具webpack的<a href="https://github.com/shama/stylus-loader" target="_blank" rel="external">stylus-loader</a>来将stylus语言转化为原生css。</li>
</ul>
<hr>
<h2 id="stylus的特点"><a href="#stylus的特点" class="headerlink" title="stylus的特点"></a>stylus的特点</h2><ul>
<li>官网可以直接将stylus代码放在官网<a href="http://stylus-lang.com/try.html#?code=body%20%7B%0A%20%20font:%2014px/1.5%20Helvetica,%20arial,%20sans-serif;%0A%20%20#logo%20%7B%0A%20%20%20%20border-radius:%205px;%0A%20%20%7D%0A%7D" target="_blank" rel="external">这一页</a>测试生成原生css（本人硬加上去的特点）</li>
<li>通过缩进来解释语言（喜欢python的geek应该会比较喜欢）。</li>
<li>待补充..</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">body</div><div class="line">  div</div><div class="line">      <span class="attribute">color</span> white</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span> <span class="selector-tag">div</span> &#123;</div><div class="line">    <span class="attribute">color</span>:<span class="number">#fff</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<h2 id="stylus的优点"><a href="#stylus的优点" class="headerlink" title="stylus的优点"></a>stylus的优点</h2><ul>
<li>类python语法（官网称stylus为pythonic）。</li>
<li>语法灵活（可选的括号，冒号，分号等）。</li>
</ul>
<hr>
<h2 id="stylus的缺点"><a href="#stylus的缺点" class="headerlink" title="stylus的缺点"></a>stylus的缺点</h2><ul>
<li>由于其语法灵活的问题，如果没有团队规范，那么就会带来团队开发混乱，维护起来比较麻烦，各种语法混杂。</li>
</ul>
<hr>
<h2 id="stylus语法介绍"><a href="#stylus语法介绍" class="headerlink" title="stylus语法介绍"></a>stylus语法介绍</h2><h3 id="选择器-selectors"><a href="#选择器-selectors" class="headerlink" title="选择器(selectors)"></a>选择器(selectors)</h3><h4 id="缩进-换行缩进表示语句前进"><a href="#缩进-换行缩进表示语句前进" class="headerlink" title="缩进(换行缩进表示语句前进)"></a><strong>缩进(换行缩进表示语句前进)</strong></h4><figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">body</div><div class="line">  <span class="attribute">color</span>:white;</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span>&#123;</div><div class="line">    <span class="attribute">color</span>:white;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<h4 id="同级选择器"><a href="#同级选择器" class="headerlink" title="同级选择器"></a><strong>同级选择器</strong></h4><ul>
<li>element,element</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div</div><div class="line">p</div><div class="line">    <span class="attribute">color</span>:white;</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span>,<span class="selector-tag">p</span>&#123;</div><div class="line">    <span class="attribute">color</span>:white;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<ul>
<li>element element</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div</div><div class="line">    p</div><div class="line">        <span class="attribute">color</span>:white;</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span> <span class="selector-tag">p</span>&#123;</div><div class="line">    <span class="attribute">color</span>:white;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<ul>
<li>element &gt;element</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div</div><div class="line">    &gt;p</div><div class="line">      <span class="attribute">color</span>:white;</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span> &gt;<span class="selector-tag">p</span>&#123;</div><div class="line">    <span class="attribute">color</span>:white;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ul>
<li>element +element</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div</div><div class="line">    +p</div><div class="line">        <span class="attribute">color</span>:white;</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span> +<span class="selector-tag">p</span>&#123;</div><div class="line">    <span class="attribute">color</span>:white;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<p><strong>例外：</strong></p>
<figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">foo <span class="keyword">bar </span><span class="keyword">baz</span></div><div class="line"><span class="keyword">&gt;span</span></div><div class="line"><span class="keyword"> </span>   color:white<span class="comment">;</span></div></pre></td></tr></table></figure>
<blockquote>
<p><strong>注：上面代码的foo bar baz编译器解析有可能是”标签 属性 属性”，有可能是”标签 标签 标签”（有可能是自定义的标签）</strong>（编译器只会识别文档结构而不是标签或者属性）</p>
</blockquote>
<hr>
<p>建议写成下面这样（在最后的选择器后面加一个逗号[comma]）：</p>
<figure class="highlight armasm"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">foo</span> <span class="keyword">bar </span><span class="keyword">baz,</span></div><div class="line"><span class="keyword">&gt;span</span></div></pre></td></tr></table></figure>
<blockquote>
<p><strong>注：上面的同级选择器是这里的优化，没有提到的其他选择器大多数保留原来的语法，或者与上面的语法类似，当然上面提到的选择器也可以使用原来的语法</strong></p>
</blockquote>
<hr>
<h4 id="引用父级选择器"><a href="#引用父级选择器" class="headerlink" title="引用父级选择器"></a><strong>引用父级选择器</strong></h4><blockquote>
<p><strong>使用&amp;指向父级选择器，有可能是选择器数组，也有可能是单独的一个选择器。</strong></p>
</blockquote>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">div</div><div class="line">p</div><div class="line">    <span class="attribute">color</span>:<span class="number">#FFF</span>;</div><div class="line">    &amp;:hover</div><div class="line">        <span class="attribute">color</span>:<span class="number">#000</span>;</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span>,</div><div class="line"><span class="selector-tag">p</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">div</span>:hover,</div><div class="line"><span class="selector-tag">p</span>:hover &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<blockquote>
<p><strong>解释：其实”&amp;”可以理解为代替了上一层的选择器，比如上面例子，”&amp;”的上一层是”div,p”，这样说比较好理解。</strong></p>
</blockquote>
<p>下面是引用父级选择器的另一个例子</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="title">box-shadow</span><span class="params">()</span></span></div><div class="line">  -webkit-<span class="attribute">box-shadow</span> arguments</div><div class="line">  -moz-<span class="attribute">box-shadow</span> arguments</div><div class="line">  <span class="attribute">box-shadow</span> arguments</div><div class="line">  <span class="selector-tag">html</span><span class="selector-class">.ie8</span> &amp;,</div><div class="line">  <span class="selector-tag">html</span><span class="selector-class">.ie7</span> &amp;,</div><div class="line">  <span class="selector-tag">html</span><span class="selector-class">.ie6</span> &amp;</div><div class="line">    <span class="attribute">border</span> <span class="number">2px</span> solid arguments[length(arguments) - <span class="number">1</span>]</div><div class="line"></div><div class="line">body</div><div class="line">  #login</div><div class="line">    <span class="attribute">box-shadow</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">#eee</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span> <span class="selector-id">#login</span> &#123;</div><div class="line">  -webkit-<span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">#eee</span>;</div><div class="line">  -moz-<span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">#eee</span>;</div><div class="line">  <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">#eee</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">html</span><span class="selector-class">.ie8</span> <span class="selector-tag">body</span> <span class="selector-id">#login</span>,</div><div class="line"><span class="selector-tag">html</span><span class="selector-class">.ie7</span> <span class="selector-tag">body</span> <span class="selector-id">#login</span>,</div><div class="line"><span class="selector-tag">html</span><span class="selector-class">.ie6</span> <span class="selector-tag">body</span> <span class="selector-id">#login</span> &#123;</div><div class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#eee</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<blockquote>
<p><strong>注：如果想在代码里使用”&amp;”符号而不是stylus的”&amp;”，可以在&amp;字符前加一个反斜杠并加上引号，如下：</strong></p>
</blockquote>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo</span>[title*=<span class="string">'\&amp;'</span>]  <span class="comment">/*.foo[title*='&amp;']*/</span></div></pre></td></tr></table></figure>
<hr>
<h4 id="部分引用父级选择器之单层选择器"><a href="#部分引用父级选择器之单层选择器" class="headerlink" title="部分引用父级选择器之单层选择器"></a><strong>部分引用父级选择器之单层选择器</strong></h4><blockquote>
<p>使用^ [N] 引用第N层父级选择器。如果N是正数，这里的第N层指的是最上层上层选择器到第N层选择器，如果N是负数，这里的第N层指的是最上层选择器到倒数第|N|层选择器。 </p>
</blockquote>
<ul>
<li>有&amp;的情况：</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">.foo</div><div class="line">  &amp;__bar</div><div class="line">    <span class="attribute">width</span>: <span class="number">10px</span></div><div class="line"></div><div class="line">    ^[<span class="number">0</span>]:hover &amp;</div><div class="line">      <span class="attribute">width</span>: <span class="number">20px</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo__bar</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.foo</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.foo__bar</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<ul>
<li>没有&amp;的情况：</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">.foo</div><div class="line">  .bar</div><div class="line">    <span class="attribute">width</span>: <span class="number">10px</span></div><div class="line"></div><div class="line">    ^[<span class="number">0</span>]:hover &amp;</div><div class="line">      <span class="attribute">width</span>: <span class="number">20px</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo</span> <span class="selector-class">.bar</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.foo</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.foo</span> <span class="selector-class">.bar</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<ul>
<li>N为0或者正数则从最上层开始到最下层，N为负数则从最下层开始到最上层。其实第N层的选择器是包含了上一层的选择器的，例如下面的例子，第一层选择器是foo,第二层就是foo bar,第三层是foo bar baz，如此类推（官网说的是嵌套）。</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">.foo</div><div class="line">  bar</div><div class="line">    baz</div><div class="line">      <span class="attribute">width</span>: <span class="number">10px</span></div><div class="line"></div><div class="line">      ^[-<span class="number">1</span>]:hover &amp;</div><div class="line">        <span class="attribute">width</span>: <span class="number">20px</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo</span> <span class="selector-tag">bar</span> <span class="selector-tag">baz</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.foo</span> <span class="selector-tag">bar</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.foo</span> <span class="selector-tag">bar</span> <span class="selector-tag">baz</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<blockquote>
<p><strong>注：如果写在mixins里的话，推荐将N写成负数。因为你并不知道你在调用哪一层（ 有可能还有隐藏的上层选择器）</strong></p>
</blockquote>
<hr>
<h4 id="部分引用父级选择器之范围选择器"><a href="#部分引用父级选择器之范围选择器" class="headerlink" title="部分引用父级选择器之范围选择器"></a><strong>部分引用父级选择器之范围选择器</strong></h4><blockquote>
<p>^ [N..M] 引用第N层选择器到第M层选择器组成的选择器。<br>注：这里有些跟引用单层选择器有点不同，这里的第几层是不包括上层选择器的，具体来看例子感受一下。</p>
</blockquote>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">.foo</div><div class="line">  bar</div><div class="line">    baz</div><div class="line">      test</div><div class="line">         <span class="attribute">width</span>: <span class="number">10px</span></div><div class="line">         ^[-<span class="number">1</span>]:hover ^[-<span class="number">2</span>..-<span class="number">1</span>]</div><div class="line">             <span class="attribute">width</span>: <span class="number">20px</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo</span> <span class="selector-tag">bar</span> <span class="selector-tag">baz</span> <span class="selector-tag">test</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.foo</span> <span class="selector-tag">bar</span> <span class="selector-tag">baz</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">baz</span> <span class="selector-tag">test</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<h4 id="其他部分引用父级选择器"><a href="#其他部分引用父级选择器" class="headerlink" title="其他部分引用父级选择器"></a>其他部分引用父级选择器</h4><ul>
<li>最上层父级选择器(~/)，相当于^ [0]</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">.block</div><div class="line">  &amp;__element</div><div class="line">    ~/:hover &amp;</div><div class="line">      <span class="attribute">color</span>: red</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.block</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.block__element</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#f00</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<ul>
<li>相对父级选择器(../)</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">.foo</div><div class="line">  bar</div><div class="line">    baz</div><div class="line">      test</div><div class="line">         <span class="attribute">width</span>: <span class="number">10px</span></div><div class="line">         ../:hover ^[-<span class="number">1</span>..-<span class="number">2</span>]</div><div class="line">             <span class="attribute">width</span>: <span class="number">20px</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo</span> <span class="selector-class">.bar</span> <span class="selector-class">.baz</span> <span class="selector-class">.test</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.foo</span> <span class="selector-class">.bar</span> <span class="selector-class">.baz</span>:hover <span class="selector-class">.baz</span> <span class="selector-class">.test</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<ul>
<li>脱离嵌套的选择器(/)</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">div</div><div class="line">p</div><div class="line">   span</div><div class="line">      <span class="attribute">color</span> <span class="number">#A7A7A7</span></div><div class="line">      &amp;:hover,</div><div class="line">      /.is-hovered</div><div class="line">        <span class="attribute">color</span> <span class="number">#000</span></div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span> <span class="selector-tag">span</span>,</div><div class="line"><span class="selector-tag">p</span> <span class="selector-tag">span</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#a7a7a7</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">div</span> <span class="selector-tag">span</span>:hover,</div><div class="line"><span class="selector-tag">p</span> <span class="selector-tag">span</span>:hover,</div><div class="line"><span class="selector-class">.is-hovered</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<blockquote>
<p><strong>上面的例子里，转化后的代码.is-hovered已经脱离了嵌套结构了，已经不在任何选择器嵌套里。</strong></p>
</blockquote>
<hr>
<h4 id="选择器的值"><a href="#选择器的值" class="headerlink" title="选择器的值"></a><strong>选择器的值</strong></h4><blockquote>
<p><strong>selector()获取当前嵌套层的值，selectors()获取从最上层到当前层每一层的选择器的list</strong></p>
</blockquote>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">.foo</div><div class="line">  &amp;:hover</div><div class="line">       class selector()</div><div class="line">       <span class="attribute">color</span> black</div><div class="line">       span</div><div class="line">          <span class="attribute">color</span> white</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.foo</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">  <span class="attribute">class</span>: <span class="string">'.foo:hover'</span>; <span class="comment">/*这个是selector()的值*/</span></div><div class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.foo</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">span</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">.a</div><div class="line">  .b</div><div class="line">    &amp;__c</div><div class="line">      <span class="attribute">content</span>: selectors()</div><div class="line">      span</div><div class="line">            <span class="attribute">color</span> white</div></pre></td></tr></table></figure>
<p>转化：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.a</span> <span class="selector-class">.b__c</span> &#123;</div><div class="line">  <span class="attribute">content</span>: <span class="string">'.a'</span>, <span class="string">'&amp; .b'</span>, <span class="string">'&amp;__c'</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.a</span> <span class="selector-class">.b__c</span> <span class="selector-tag">span</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<blockquote>
<p>QUOTE: If you are not moving ahead , you are falling behind.</p>
</blockquote>
</section>
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#stylus" >
    <span class="tag-code">stylus</span>
  </a>

  <a href="/tags#css" >
    <span class="tag-code">css</span>
  </a>

      </div>
    
    
<nav id="article-nav">
    
        <a href="/2017/08/30/给-Hexo-添加带滚动监听的文章目录/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">NEWER</strong>
            <div class="article-nav-title">
                
                    (转)给 Hexo 添加带滚动监听的文章目录
                
            </div>
        </a>
    
    
        <a href="/2017/08/30/stylus入门使用方法/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">OLDER</strong>
            <div class="article-nav-title">stylus入门使用方法</div>
        </a>
    
</nav>


    <div class="money-like">
      <div class="reward-btn">
        赏
        <span class="money-code">
          <span class="wechat-code">
            <div class="code-image"></div>
            <b>使用微信打赏</b>
          </span>
        </span>
      </div>
      <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
    </div>
    <div class="qrcode">
      <canvas id="share-qrcode"></canvas>
 
      <p class="notice">扫描二维码，分享此文章</p>
    </div>
    
      <!-- UY BEGIN -->
      <div id="uyan_frame"></div>
      <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2142069"></script>
      <!-- UY END -->
    
  </article>
</main>

<script>
  (function () {
    var url = 'https://ycg31.oschina.io/2017/08/30/stylus预处理入门(一)——选择器/';
    var banner = ''
    if (banner) {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

     // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', 'http://file.muyutech.com/error-img.png') 
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      var imageW = $(this).width()
      var imageH = $(this).height()
      
      var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
      zoom = zoom < 1 ? 1 : zoom
      zoom = zoom > 2 ? 2 : zoom
      var transY = (($(window).height() - imageH) / 2).toFixed(2)

      $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
      $('.image-view-wrap').addClass('wrap-active')
      $('.image-view-wrap img').css({
        'width': `${imageW}`,
        'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
      })
      $('html').css('overflow', 'hidden')

      $('.image-view-wrap').on('click', function() {
        $(this).remove()
        $('html').attr('style', '')
      })
    })

    // qrcode
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });



    // gitment
    var gitmentConfig = "";
    if (gitmentConfig != "undefined") {
      var gitment = new Gitment({
        id: "stylus预处理入门(一)——选择器",
        owner: "",
        repo: "",
        oauth: {
          client_id: "",
          client_secret: ""
        },
        theme: {
          render(state, instance) {
            const container = document.createElement('div')
            container.lang = "en-US"
            container.className = 'gitment-container gitment-root-container'
            container.appendChild(instance.renderHeader(state, instance))
            container.appendChild(instance.renderEditor(state, instance))
            container.appendChild(instance.renderComments(state, instance))
            container.appendChild(instance.renderFooter(state, instance))
            return container;
          }
        }
      })
      gitment.render(document.getElementById('comments'))
    }
  })();
</script>

    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2017 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a href="https://github.com/yanm1ng">yanm1ng</a> | Mod by <a href="https://github.com/ycg31">ycg31</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine == 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->

<script src="/js/script.js"></script>
  </body>
</html>